<template>
    <div class="post-lists">
        <el-card class="!border-none" shadow="never">
            <el-form
                ref="formRef"
                class="mb-[-16px]"
                label-width="70px"
                :model="queryParams"
                :inline="true"
            >
                <el-form-item label="对方名称">
                    <el-input
                        class="w-[200px]"
                        v-model="queryParams.other"
                        clearable
                        @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="收款金额">
                    <el-input
                        class="w-[200px]"
                        v-model="queryParams.r_money"
                        clearable
                        @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="付款金额">
                    <el-input
                        class="w-[200px]"
                        v-model="queryParams.p_money"
                        clearable
                        @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="一级分类">
                    <el-select clearable filterable class="!w-[200px]" v-model="queryParams.p_cate_id">
                        <el-option
                            v-for="(item, key) in filter.pCateList"
                            :key="key"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类">
                    <el-select clearable class="!w-[200px]" filterable v-model="queryParams.cate_id">
                        <el-option
                            v-for="(item, key) in filter.cateList"
                            :key="key"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="一级部门">
                    <el-select clearable class="!w-[200px]" filterable v-model="queryParams.p_dept_id">
                        <el-option
                            v-for="(item, key) in filter.pDeptList"
                            :key="key"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="二级部门">
                    <el-select clearable class="!w-[200px]" filterable v-model="queryParams.dept_id">
                        <el-option
                            v-for="(item, key) in filter.deptList"
                            :key="key"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="公司">
                    <el-select clearable class="!w-[200px]" filterable v-model="queryParams.company_id">
                        <el-option
                            v-for="(item, key) in filter.companyList"
                            :key="key"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="银行">
                    <el-select clearable class="!w-[200px]" filterable v-model="queryParams.account_id">
                        <el-option
                            v-for="(item, key) in filter.accountList"
                            :key="key"
                            :label="item.label"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="重分类">
                    <el-select clearable class="!w-[200px]" filterable v-model="queryParams.status">
                        <el-option
                            v-for="(item, key) in filter.status"
                            :key="key"
                            :label="item.label"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="流水时间">
                    <el-date-picker
                        clearable
                        v-model="queryParams.pay_time"
                        value-format="X"
                        type="datetimerange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="请输入流水时间"
                        :default-time="[
                            new Date(2000, 1, 1, 0, 0, 0),
                            new Date(2000, 2, 1, 23, 59, 59)
                        ]"
                        @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                    <export
                        :params="queryParams"
                        v-perms="[`budget.bottomTable/exportModel`]"
                        name="模版下载"
                        btnName="模版下载"
                        api="finance.record/exportModel"
                    />
                    <export
                        :params="queryParams"
                        v-perms="[`budget.bottomTable/export`]"
                        name="导出"
                        api="finance.record/export"
                    />
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="!border-none mt-4" shadow="never">
            <common-table :columns="columns" :pager="pager">
                <template #btns>
                    <div class="flex items-center">
                        <el-button
                            v-perms="['budget.bottomTable/add']"
                            type="primary"
                            @click="handleAdd()"
                        >
                            <template #icon>
                                <icon name="el-icon-Plus" />
                            </template>
                            新增
                        </el-button>
                        <material-picker
                            class="ml-[12px] inline-block"
                            type="file"
                            v-perms="['budget.bottomTable/input']"
                            :excludeDomain="true"
                            :showDraggable="false"
                            :emptyFileList="true"
                            @change="(v: any) => handleImport(v)"
                        >
                            <template #upload>
                                <el-button type="primary"
                                    ><template #icon> <icon name="el-icon-Upload" /> </template
                                    >导入</el-button
                                >
                            </template>
                        </material-picker>
                    </div>
                </template>
                <template #actions="{ row }">
                    <el-button
                        v-perms="['budget.bottomTable/edit']"
                        type="primary"
                        @click="handleEdit(row)"
                    >
                        编辑
                    </el-button>
                    <!--                    <el-button-->
                    <!--                        v-perms="['operation.config.classify/delete']"-->
                    <!--                        type="danger"-->
                    <!--                        @click="handleDelete(row.id)"-->
                    <!--                    >-->
                    <!--                        删除-->
                    <!--                    </el-button>-->
                </template>
            </common-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
    </div>
</template>
<script lang="ts" setup name="OperationConfigClassifyLists">
import type { ColumnsType } from '@/components/common-table/types'
import feedback from '@/utils/feedback'

import EditPopup from './edit.vue'
import { usePaging } from '@/hooks/usePaging.ts'
import { apiRecordImport, apiRecordLists } from '@/api/record.ts'
import {
    apiConfigAccountGetAll,
    apiConfigCateGetAll,
    apiConfigCateTwoGetAll,
    apiConfigCompanyGetAll,
    apiConfigDeptGetAll,
    apiConfigDeptTwoGetAll
} from '@/api/config.ts'
import { watch } from 'vue'

const columns = reactive<ColumnsType[]>([
    {
        label: '流水时间',
        prop: 'pay_time',
        type: 'date',
        fmt: 'yyyy-mm-dd hh:MM:ss',
        minWidth: '200'
    },
    {
        label: '流程编码',
        prop: 'sn',
        minWidth: '180'
    },
    {
        label: '对方名称',
        prop: 'other',
        minWidth: '180'
    },
    {
        label: '收款金额',
        prop: 'r_money',
        minWidth: '180',
        type: 'currency'
    },
    {
        label: '付款金额',
        prop: 'p_money',
        minWidth: '180',
        type: 'currency'
    },
    // {
    //     label: '余额',
    //     prop: 'month',
    //     minWidth: '180'
    // },
    {
        label: '户名',
        prop: 'account_name',
        minWidth: '180'
    },
    {
        label: '所属银行',
        prop: 'account_bank',
        minWidth: '180'
    },
    {
        label: '所属类别',
        prop: 'cate_name',
        minWidth: '180'
    },
    {
        label: '摘要',
        prop: 'abstract',
        minWidth: '180'
    },
    {
        label: '所属部门',
        prop: 'dept_name',
        minWidth: '180'
    },
    {
        label: '提交人',
        prop: 'name',
        minWidth: '180'
    },
    {
        label: '所属期间',
        prop: 'month',
        minWidth: '180'
    },
    {
        label: '备注',
        prop: 'desc',
        minWidth: '180'
    }
])

const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const showEdit = ref(false)
const queryParams = reactive<any>({
    company_id: '',
    p_cate_id: '',
    p_dept_id: '',
    pay_time: '',
    r_money: '',
    p_money: '',
    cate_id: '',
    dept_id: '',
    account_id: '',
    status:'',
    other:''
})

const filter = reactive({
    pCateList: [] as any,
    cateList: [] as any,
    pDeptList: [] as any,
    deptList: [] as any,
    companyList: [] as any,
    accountList: [] as any,
    status:[
        {
            label: '未分类',
            id:0
        },
        {
            label: '已分类',
            id:1
        }
    ]
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: apiRecordLists,
    params: queryParams
})

const handleAdd = async () => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('add')
}

const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.getDetail(data)
}

const getFilter = async () => {
    filter.pCateList = await apiConfigCateGetAll()
    filter.cateList = await apiConfigCateTwoGetAll()
    filter.pDeptList = await apiConfigDeptGetAll()
    filter.deptList = await apiConfigDeptTwoGetAll()
    filter.companyList = await apiConfigCompanyGetAll()
    filter.accountList = await apiConfigAccountGetAll()
}

const handleImport = async (v: any) => {
    const res = await apiRecordImport({
        file: v
    })
    if (res.code == 100) {
        setTimeout(async () => {
            await handleImport(v)
        }, 500)
    }
    if (res.show) {
        if (res.code == 1) {
            feedback.msgSuccess(res.msg)
        } else {
            feedback.msgError(res.msg)
        }
    }
    getLists()
}

const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    // await apiOperationAnnexCateDelete({ id })
    getLists()
}

const route = useRoute()

onMounted(() => {
    Object.assign(queryParams, route.query)
    const arrNum = ['p_cate_id', 'company_id', 'p_dept_id', 'cate_id', 'dept_id', 'account_id']
    for (let i = 0; i < arrNum.length; i++) {
        queryParams[arrNum[i]] = queryParams[arrNum[i]] ? Number(queryParams[arrNum[i]]) : ''
    }
    getFilter()
})

watch(()=>queryParams.company_id,async ()=>{
    filter.accountList = await apiConfigAccountGetAll({
        company_id:queryParams.company_id
    })
})

onActivated(() => {
    getFilter()
    getLists()
})
</script>
